<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript" src="<%= request.getContextPath()%>/script/questionSet/main.js"></script>
<script type="text/javascript" src="<%= request.getContextPath()%>/script/questionSet/QuestionSet.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#previewBtn2").click(function() {
            preview(${param.id}, $("#qsTitle").html());
        });

        initQbtns();
    });
</script>

<div id="questions" class="content2" style="display:none">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>

            <jsp:include page="briefInfo.jsp"/>

            <!-- Function1 -->
            <ul class="functions1">
                <li>
                    <jsp:include page="../common/backToResultsButton.jsp" />
                </li>

                <c:if test="${questionSet.status.code != 'retired' && questionSet.availability.code != 'locked'}">
                    <security:authorize ifAnyGranted="ROLE_PORTAL_USER,ROLE_AUTHOR">
                        <li>
                            <a href="edit.html?id=${questionSet.questionSetId}">
                                <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit.gif"
                                     class="btn"/>
                            </a>
                        </li>
                    </security:authorize>
                </c:if>

                <c:if test="${questionSet.status.code == 'retired' || questionSet.availability.code == 'locked'}">
                    <security:authorize ifAnyGranted="ROLE_PORTAL_USER,ROLE_AUTHOR">
                        <li>
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit_tint.gif"/>
                        </li>
                    </security:authorize>
                </c:if>

                <security:authorize ifAnyGranted="ROLE_PORTAL_USER,ROLE_AUTHOR">
                    <li>
                        <input type="image" id="previewBtn2" class="btn"
                               src="<%= request.getContextPath()%>/images/btn/functions1/btn_preview.gif"/>
                    </li>
                </security:authorize>
            </ul>
            <div class="corners_bottom"></div>
        </div>

        <div class="error">
            <h3>
                This Page contains the following ${fn:length(questionSet.questionsInSet)}
                Question${fn:length(questionSet.questionsInSet) > 1 ? 's' : ''}:
            </h3>
        </div>

        <ul class="functions2">
            <li class="view">
                <input type="image" name="qbtn" class="btn" onclick="clickAction('../question/view')"
                       src="<%= request.getContextPath()%>/images/btn/functions2/btn_view_light.gif">
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <input type="image" id="editQuestionBtn" name="qbtn" onclick="clickAction('../question/edit')" class="btn"
                           src="<%= request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif"/>
                </li>
            </security:authorize>
        </ul>

        <div class="question_sets">
            <div class="question_sets_inside">
                <form id="questionSet" name="questionSet" method="post">
                    <input type="hidden" id="submitAction" name="submitAction"/>

                    <div class="question">
                        <c:forEach var="qis" items="${questionSet.sortedQuestions}">

                            <!-- Get the indent level for each questions -->
                            <c:set var="indentLevel" value="${fn:length(fn:split(qis.sequence, '.'))}"/>

                            <!-- id: q_xxx, because all questions in a questionset has a unique sequence, so this value can identity a question. -->
                            <!-- name: parent_xxx, the value is used to get the up sibling and down sibling value for a question. -->
                            <table index="${qis.sequence}" sequence="${qis.sequence}" class="line${indentLevel}"
                                   width="100%" border="0" cellpadding="0" cellspacing="0"
                                   parent="${fn:length(qis.sequence) > 2 ? fn:substring(qis.sequence, 0, fn:length(qis.sequence) - 2) : '.'}"
                                   status="${qis.question.questionStatusType.code}" availability="${qis.question.questionAvailabilityType.code}"
                                   onclick="Dialogs.subItemClick(this, 'id=${qis.question.questionId}', 'qbtn');">
                                <tbody>
                                <tr>
                                    <th width="${3 + (indentLevel - 1) * 4}%" class="number${indentLevel}"
                                        scope="row">${qis.sequence}</th>
                                    <td width="${27 - (indentLevel - 1) * 4}% class="row1">${qis.question.name}</td>    
                                    <td width="12%" class="row2">${qis.question.refId}</td>
                                    <td width="8%" class="row2">Ver ${qis.question.version}</td>
                                    <td width="16%" class="row3">
                                            ${qis.question.questionAvailabilityType.name}/${qis.question.questionStatusType.name}
                                    </td>
                                    <td width="34%" class="row4">
                                            ${fn:substring(qis.question.text, 0, 35)}…
                                    </td>
                                </tr>
                                <input type="hidden" name="S-${qis.sequence}" value="${qis.sequence}" />
                                </tbody>
                            </table>
                        </c:forEach>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Question Set Preview -->
<jsp:include page="previewFrame.jsp"/>